$("document").ready(function(){
    /***不需要自动滚动，去掉即可***/
    /*var time = window.setInterval(function(){
     $('.claListRight').click();
     },5000);
     $('.claListUlList').mouseover(function() {
     clearInterval(time);
     });
     $('.claListUlList').mouseout(function(){
     time = window.setInterval(function(){
     $('.claListRight').click();
     },5000);
     });

     $('.claListLeft').mouseover(function() {
     clearInterval(time);
     });
     $('.claListLeft').mouseout(function(){
     time = window.setInterval(function(){
     $('.claListLeft').click();
     },5000);
     });
     $('.claListRight').mouseover(function() {
     clearInterval(time);
     });
     $('.claListRight').mouseout(function(){
     time = window.setInterval(function(){
     $('.claListRight').click();
     },5000);
     });*/
    /***不需要自动滚动，去掉即可***/
    var page=1;
    var i=1;
    var box=$('.claListUlList');
    var h=$('.claListUlList ul').width();
    var pagetotal= $('.claListUlList ul').length;
    $(".claListUlList").css("width",pagetotal*h+"px");
    $('.htmlpic2').html($('.htmlpic1').html());//复制内容
    // document.getElementById("a").innerHTML =  document.getElementById("b").innerHTML;
    w = pagetotal*1000;
    //alert(w);
    $('.claListLeft').bind('click',upwardsfn);
    $('.claListRight').bind('click',downfn);
    function upwardsfn(){
        /*
         if($('.htmlpic1,.htmlpic2').is(':animated')){
         $('.htmlpic1,.htmlpic2').stop(true,true);
         }*/
        /*if(page>1){
         box.animate({ marginLeft : '+='+h }, "slow");
         page--;
         }*/
        if($('.htmlpic2,.htmlpic1').is(':animated')){
            $('.htmlpic2,.htmlpic1').stop(true,true);
        }
        if($('.claListUlList ul').length>2){
            ml = parseInt($('.htmlpic1').css('left'));
            sl = parseInt($('.htmlpic2').css('left'));
            // alert(ml);
            if(ml<=0 && ml>w*-1){
                //alert("aa");
                $('.htmlpic2').css({left: w * -1 + 'px'});
                $('.htmlpic1').animate({left: ml + 1000 + 'px'},'slow');
                if(ml==0){
                    $('.htmlpic2').animate({left: (w - 1000) * -1 + 'px'},'slow');
                }
            }else{
                //alert("s1="+sl);
                $('.htmlpic1').css({left: w * -1 + 'px'});
                $('.htmlpic2').animate({left: sl + 1000 + 'px'},'slow');
                if(sl==0){
                    $('.htmlpic1').animate({left: ml+1000+'px'},'slow');
                }
            }
        }
    }
    function downfn(){
        /*
         if(pagetotal>page){
         box.animate({ marginLeft : '-='+h }, "slow");
         page++;
         }*/
        if($('.htmlpic1,.htmlpic2').is(':animated')){
            $('.htmlpic1,.htmlpic2').stop(true,true);
        }
        if($('.claListUlList ul').length>2){//多于4张图片
            ml = parseInt($('.htmlpic1').css('left'));//默认图片ul位置
            sl = parseInt($('.htmlpic2').css('left'));//交换图片ul位置
            if(ml<=0 && ml>w*-1){//默认图片显示时
                // alert("aa");
                $('.htmlpic2').css({left: '1000px'});//交换图片放在显示区域右侧
                $('.htmlpic1').animate({left: ml - 1000 + 'px'},'slow');//默认图片滚动
                if(ml==(w-1000)*-1){//默认图片最后一屏时
                    $('.htmlpic2').animate({left: '0px'},'slow');//交换图片滚动
                }
            }else{//交换图片显示时
                // alert("bb");
                $('.htmlpic1').css({left: '1000px'})//默认图片放在显示区域右
                $('.htmlpic2').animate({left: sl - 1000 + 'px'},'slow');//交换图片滚动
                if(sl==(w-1000)*-1){//交换图片最后一屏时
                    $('.htmlpic1').animate({left: '0px'},'slow');//默认图片滚动
                }
            }
        }

    }

});
